<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="myTag/core"%>
<!DOCTYPE html>
<html>
	<head>
		<title>问卷调查</title>
		<%
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; 
		%>
		<base href="<%=basePath%>">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link href="script/home/css/bootstrap.min.css" rel="stylesheet">
		<link href="script/home/css/font-awesome.min.css" rel="stylesheet">
		<link href="script/home/css/animate.min.css" rel="stylesheet">
		<link href="script/home/css/prettyPhoto.css" rel="stylesheet">
		<link href="script/home/css/main.css" rel="stylesheet">
		<link href="script/home/css/responsive.css" rel="stylesheet">
		<!--[if lt IE 9]>
		<script src="script/home/js/html5shiv.js"></script>
		<script src="script/home/js/respond.min.js"></script>
		<![endif]-->       
		<link rel="shortcut icon" href="script/home/script/home/images/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="script/home/script/home/images/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="script/home/script/home/images/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="script/home/script/home/images/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="script/home/script/home/images/ico/apple-touch-icon-57-precomposed.png">
		
		<script src="script/home/js/jquery.js"></script>
		<script src="script/home/js/bootstrap.min.js"></script>
		<script src="script/bootstrapValidator/js/bootstrapValidator.min.js"></script>
		<script src="script/bootstrapValidator/js/language/zh_CN.js"></script>
		<script src="script/home/js/jquery.prettyPhoto.js"></script>
		<script src="script/home/js/jquery.isotope.min.js"></script>
		<script src="script/home/js/main.js"></script>
		<script src="script/home/js/wow.min.js"></script>
		<script src="script/home/js/bootstrap-paginator.min.js"></script>
		
		<script src="script/chart/echarts/echarts.min.js"></script>
	</head>
	<body>
		<div class="navbar navbar-inverse affix" style="width: 100%;height: 40px; z-index: 999999;padding: 0px;color: white;font-weight: bold;font-size: 14px;" >
			<table style="width: 100%;height: 100%;">
				<tr>
					<td style="width: 20%;"></td>
					<td style="width: 50%;text-align: center;font-size: 30px;">${survey.name }</td>
					<td id="remainingTd" style="width: 30%;text-align: right;">
						&nbsp;&nbsp;
					</td>
				</tr>
			</table>
		</div>
		<div class="container" style="padding-top: 70px;">
			<div class="row">
				<div class="col-md-10 col-lg-10">
					<c:forEach var="paperQuestionEx" items="${paperQuestionExList[0].subList }" varStatus="s1">
					<div class="row">
						<div class="col-md-12 col-lg-12">
							<div class="panel panel-default">
								<div id="section-${s1.index }" class="panel-heading">
									${paperQuestionEx.name }
								</div>
								<c:if test="${!empty paperQuestionEx.description }">
								<div class="panel-body">
									<p>${paperQuestionEx.description }</p>
								</div>
								</c:if>
								<ul class="list-group">
									<c:forEach var="subPaperQuestionEx" items="${paperQuestionEx.subList }" varStatus="s2">
									<c:set var="q" value="${subPaperQuestionEx.questionEx }"></c:set>
									<li class="list-group-item">
										<%-- 题干 --%>
										<input type="hidden" name="paperQuestionIds" value="${subPaperQuestionEx.id }">
										<span style="vertical-align: top; ">${s2.count}：</span>
										<span style="display: inline-block;">${q.title }</span>
										<br/>
										<%-- 如果是单选竖向 --%>
										<c:if test="${q.type == '1' }">
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
										<div class="radio">
											<label>
												<input type="radio" name="q${q.id}" value="${dictMap[s3.count] }" 
													onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
										</div>
										</c:forEach>
										<div id="ct_q${q.id}" style="width: 600px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var seriesData = [];
													for(var i in chart.chartDetailList){
														var detail = chart.chartDetailList[i];
														legendData.push(detail.name);
														seriesData.push({name : detail.name, value : detail.count});
													}
														
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : "",
															x : "center"
														},
														tooltip : {
															trigger : "item",
															formatter : "{a} <br/>{b} : {c} ({d}%)"
														},
														legend : {
															orient : "vertical",
															left : "left",
															data : legendData
														},
														series : [ {
															name : "选项",
															type : "pie",
															radius : "55%",
															center : [ "50%", "60%" ],
															data : seriesData,
															itemStyle : {
																emphasis : {
																	shadowBlur : 10,
																	shadowOffsetX : 0,
																	shadowColor : "rgba(0, 0, 0, 0.5)"
																}
															}
														} ]
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是单选横向 --%>
										<c:if test="${q.type == '2' }">
										<div>
											<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<label class="radio-inline">
												<input type="radio" name="q${q.id}" value="${dictMap[s3.count] }" 
													onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
											</c:forEach>
										</div>
										<div id="ct_q${q.id}" style="width: 600px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var seriesData = [];
													for(var i in chart.chartDetailList){
														var detail = chart.chartDetailList[i];
														legendData.push(detail.name);
														seriesData.push({name : detail.name, value : detail.count});
													}
														
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : "",
															x : "center"
														},
														tooltip : {
															trigger : "item",
															formatter : "{a} <br/>{b} : {c} ({d}%)"
														},
														legend : {
															orient : "vertical",
															left : "left",
															data : legendData
														},
														series : [ {
															name : "选项",
															type : "pie",
															radius : "55%",
															center : [ "50%", "60%" ],
															data : seriesData,
															itemStyle : {
																emphasis : {
																	shadowBlur : 10,
																	shadowOffsetX : 0,
																	shadowColor : "rgba(0, 0, 0, 0.5)"
																}
															}
														} ]
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是单选行列式 --%>
										<c:if test="${q.type == '3' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th></th>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<td>
														<input type="radio" name="q${q.id}_${s3.count }" value="${dictMap[s3.count] }${dictMap[s4.count] }"
																onclick="updateChoiceAnswer2('q${q.id}_${s3.count }')">
													</td>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										<div id="ct_q${q.id }" style="width: 800px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
												
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var xAxisData = [];
													var seriesData = [];
													var chartTypeList = chart.chartTypeList;
													for(var i in chart.chartTypeList[0].chartDetailList){
														legendData.push(chart.chartTypeList[0].chartDetailList[i].name);
														
														var colData = [];
														for(var j in chart.chartTypeList){
															colData.push(chart.chartTypeList[j].chartDetailList[i].count);
														}
														seriesData.push({
															name : chart.chartTypeList[0].chartDetailList[i].name,
															type : "bar",
															data : colData,
															markPoint : {
																data : [{type : "max", name : "最大值" },
																		{type : "min", name : "最小值"} ]
															},
															markLine : {
																data : [ {type : "average", name : "平均值"} ]
															}
														});
													}
													for(var i in chart.chartTypeList){
														xAxisData.push(chartTypeList[i].name);
													}
											
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : ""
														},
														tooltip : {
															trigger : "axis"
														},
														legend : {
															data : legendData
														},
														toolbox : {
															show : true,
															feature : {
																dataView : {
																	show : true,
																	readOnly : false
																},
																magicType : {
																	show : true,
																	type : ["line", "bar" ]
																},
																restore : {
																	show : true
																},
																saveAsImage : {
																	show : true
																}
															}
														},
														calculable : true,
														xAxis : [ {
															type : "category",
															data : xAxisData
														} ],
														yAxis : [ {
															type : "value"
														} ],
														series : seriesData
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是多选竖向 --%>
										<c:if test="${q.type == '4' }">
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
										<div class="radio">
											<div class="checkbox">
												<label>
													<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }"
														onclick="updateChoiceAnswer('q${q.id}')">
													${dictMap[s3.count] }：${row.name }
												</label>
											</div>
										</div>
										</c:forEach>
										<div id="ct_q${q.id}" style="width: 600px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var seriesData = [];
													for(var i in chart.chartDetailList){
														var detail = chart.chartDetailList[i];
														legendData.push(detail.name);
														seriesData.push({name : detail.name, value : detail.count});
													}
														
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : "",
															x : "center"
														},
														tooltip : {
															trigger : "item",
															formatter : "{a} <br/>{b} : {c} ({d}%)"
														},
														legend : {
															orient : "vertical",
															left : "left",
															data : legendData
														},
														series : [ {
															name : "选项",
															type : "pie",
															radius : "55%",
															center : [ "50%", "60%" ],
															data : seriesData,
															itemStyle : {
																emphasis : {
																	shadowBlur : 10,
																	shadowOffsetX : 0,
																	shadowColor : "rgba(0, 0, 0, 0.5)"
																}
															}
														} ]
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是多选横向 --%>
										<c:if test="${q.type == '5' }">
										<div>
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<label class="checkbox-inline">
												<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }"
														onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
										</c:forEach>
										</div>
										<div id="ct_q${q.id}" style="width: 600px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var seriesData = [];
													for(var i in chart.chartDetailList){
														var detail = chart.chartDetailList[i];
														legendData.push(detail.name);
														seriesData.push({name : detail.name, value : detail.count});
													}
														
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : "",
															x : "center"
														},
														tooltip : {
															trigger : "item",
															formatter : "{a} <br/>{b} : {c} ({d}%)"
														},
														legend : {
															orient : "vertical",
															left : "left",
															data : legendData
														},
														series : [ {
															name : "选项",
															type : "pie",
															radius : "55%",
															center : [ "50%", "60%" ],
															data : seriesData,
															itemStyle : {
																emphasis : {
																	shadowBlur : 10,
																	shadowOffsetX : 0,
																	shadowColor : "rgba(0, 0, 0, 0.5)"
																}
															}
														} ]
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是多选行列式 --%>
										<c:if test="${q.type == '6' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<td></td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<th>
														<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }${dictMap[s4.count] }"
																onclick="updateChoiceAnswer('q${q.id}')">
													</th>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										<div id="ct_q${q.id }" style="width: 800px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
												
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var xAxisData = [];
													var seriesData = [];
													var chartTypeList = chart.chartTypeList;
													for(var i in chart.chartTypeList[0].chartDetailList){
														legendData.push(chart.chartTypeList[0].chartDetailList[i].name);
														
														var colData = [];
														for(var j in chart.chartTypeList){
															colData.push(chart.chartTypeList[j].chartDetailList[i].count);
														}
														seriesData.push({
															name : chart.chartTypeList[0].chartDetailList[i].name,
															type : "bar",
															data : colData,
															markPoint : {
																data : [{type : "max", name : "最大值" },
																		{type : "min", name : "最小值"} ]
															},
															markLine : {
																data : [ {type : "average", name : "平均值"} ]
															}
														});
													}
													for(var i in chart.chartTypeList){
														xAxisData.push(chartTypeList[i].name);
													}
											
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : ""
														},
														tooltip : {
															trigger : "axis"
														},
														legend : {
															data : legendData
														},
														toolbox : {
															show : true,
															feature : {
																dataView : {
																	show : true,
																	readOnly : false
																},
																magicType : {
																	show : true,
																	type : ["line", "bar" ]
																},
																restore : {
																	show : true
																},
																saveAsImage : {
																	show : true
																}
															}
														},
														calculable : true,
														xAxis : [ {
															type : "category",
															data : xAxisData
														} ],
														yAxis : [ {
															type : "value"
														} ],
														series : seriesData
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是下拉列表；不用onchange，如提交失败，再次点击时应该提交 --%>
										<c:if test="${q.type == '7' }">
										<select name="q${q.id}" onclick="updateSelectAnswer('q${q.id}')" class="form-control">
											<option value="">请选择</option>
											<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<option value="${dictMap[s3.count] }">${row.name }</option>
											</c:forEach>
										</select>
										<div id="ct_q${q.id}" style="width: 600px;height:400px;"></div>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var legendData = [];
													var seriesData = [];
													for(var i in chart.chartDetailList){
														var detail = chart.chartDetailList[i];
														legendData.push(detail.name);
														seriesData.push({name : detail.name, value : detail.count});
													}
														
													var myChart = echarts.init(document.getElementById("ct_q${q.id}"));
													option = {
														title : {
															text : titleText,
															subtext : "",
															x : "center"
														},
														tooltip : {
															trigger : "item",
															formatter : "{a} <br/>{b} : {c} ({d}%)"
														},
														legend : {
															orient : "vertical",
															left : "left",
															data : legendData
														},
														series : [ {
															name : "选项",
															type : "pie",
															radius : "55%",
															center : [ "50%", "60%" ],
															data : seriesData,
															itemStyle : {
																emphasis : {
																	shadowBlur : 10,
																	shadowOffsetX : 0,
																	shadowColor : "rgba(0, 0, 0, 0.5)"
																}
															}
														} ]
													};
													myChart.setOption(option);
												}
											});
										</script>
										</c:if>
										<%-- 如果是下拉列表行列式；不用onchange，如提交失败，再次点击时应该提交 --%>
										<c:if test="${q.type == '8' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<td></td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<th>
														<select name="q${q.id}" onclick="updateSelectAnswer('q${q.id}')" class="form-control">
															<option value="">请选择</option>
															<c:forEach var="select" items="${q.selectOptionList }" varStatus="s5">
															<option value="${dictMap[s3.count] }${dictMap[s4.count] }${dictMap[s5.count] }">${select.name }</option>
															</c:forEach>
														</select>
													</th>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										<table class="table table-bordered">
											<thead>
												<tr>
													<td></td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<th>
														<div id="ct_q${q.id}_${s3.index}_${s4.index}" style="width: 200px;height:200px;"></div>
													</th>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										<script type="text/javascript">
											$.ajax({
												url : "statisAnls/chart",
												data : {surveyId : "${survey.id}", questionId : "${q.id}"},
												success : function(obj) {
													if (!obj.success) {
														$("#ct_q${q.id}").html("加载图表失败！");
														return;
													}
													
													var chart = obj.data.chart;
													var titleText = chart.titile;
													var yAxisData = [];
													for(var i in chart.chartTypeList[0].chartTypeList[0].chartDetailList){
														yAxisData.push(chart.chartTypeList[0].chartTypeList[0].chartDetailList[i].name);
													}
													var rowNum = ${fn:length(q.rowOptionList) };
													var colNum = ${fn:length(q.colOptionList) };
													for(var i = 0; i < rowNum; i++){
														for(var j = 0; j < colNum; j++){
															var seriesData = [];
															for(var k in chart.chartTypeList[i].chartTypeList[j].chartDetailList){
																seriesData.push(chart.chartTypeList[i].chartTypeList[j].chartDetailList[k].count);
															}
														
															var myChart = echarts.init(document.getElementById("ct_q${q.id}_"+i+"_"+j));
															option = {
																color : [ '#3398DB' ],
																tooltip : {
																	trigger : 'axis',
																	axisPointer : { 
																		type : 'shadow' 
																	}
																},
																grid : {
																	left : '3%',
																	right : '4%',
																	bottom : '3%',
																	containLabel : true
																},
																xAxis : [ {
																	type : 'value'
																} ],
																yAxis : [ {
																	type : 'category',
																	data : yAxisData,
																	axisTick : {
																		alignWithLabel : true
																	}
																} ],
																series : [ {
																	name : '数量',
																	type : 'bar',
																	barWidth : '60%',
																	data : seriesData
																} ]
															};
															myChart.setOption(option);
														}
													}
												}
											});
										</script>
										</c:if>
										<%-- 如果是输入框 --%>
										<c:if test="${q.type == '9' }">
										<input type="text" name="q${q.id}" placeholder="文本输入" onblur="updateInputAnswer('q${q.id }')" class="form-control">
										</c:if>
										<%-- 如果是文本框 --%>
										<c:if test="${q.type == '10' }">
										<textarea name="q${q.id}" placeholder="文本输入" class="form-control" rows="3" 
											onblur="updateTextareaAnswer('q${q.id }')"></textarea>
										</c:if>
									</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//页面加载完毕，执行如下方法：
		$(function() {
			
		});
	</script>
</html>